<template>
  <el-card class="team-card">
    <el-descriptions title="井队" :column="3" border>
      <template #extra>
        <el-space :size="10">
          <el-button v-if="hasRole('admin')" type="primary" round :icon="Edit" @click="preEditTeam">
            编辑
          </el-button>

          <el-select
            v-model="currentTeamName"
            filterable
            class="team-select"
            @change="updateCurrentTeam"
          >
            <el-option
              v-for="item in teamList.arr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-space>
      </template>
      <el-descriptions-item>
        <template #label>
          <el-space :size="5">
            <el-icon><Postcard /></el-icon>
            井队名称
          </el-space>
        </template>
        {{ currentTeam.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-space :size="5">
            <el-icon><User /></el-icon>
            领导
          </el-space>
        </template>
        {{ currentTeam.leader }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-space :size="5">
            <el-icon><iphone /></el-icon>联系电话
          </el-space>
        </template>
        {{ currentTeam.contactNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-space :size="5">
            <el-icon><Clock /></el-icon>创建时间
          </el-space>
        </template>
        <el-tag size="small">{{ currentTeam.createTime }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-space :size="5">
            <el-icon><office-building /></el-icon>描述
          </el-space>
        </template>
        <el-popover :width="300" trigger="hover">
          <template #default>
            <el-scrollbar max-height="400px">
              {{ currentTeam.description }}
            </el-scrollbar>
          </template>
          <template #reference>
            <div class="one-line">{{ currentTeam.description }}</div>
          </template>
        </el-popover>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-dialog v-model="editTeamVisible" title="编辑井队" width="40%">
    <el-form :model="editTeamForm" label-width="auto" label-position="right" size="large">
      <el-form-item label="井队名称">
        <el-input v-model="editTeamForm.name"></el-input>
      </el-form-item>
      <el-form-item label="井队领导">
        <el-input v-model="editTeamForm.leader"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="editTeamForm.contactNumber"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="editTeamForm.description"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editTeamVisible = false">取 消</el-button>
      <el-button type="primary" @click="editTeam">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="TeamCom">
import { onMounted } from 'vue'
import { hasRole } from '../utils/authUtils'
import { Edit, Postcard, User, Iphone, Clock, OfficeBuilding } from '@element-plus/icons-vue'
import { useTeam } from '../hooks/useTeam'
const {
  currentTeamName,
  currentTeam,
  teamList,
  editTeamForm,
  editTeamVisible,
  getTeamList,
  updateCurrentTeam,
  preEditTeam,
  editTeam
} = useTeam()
onMounted(() => {
  getTeamList()
})
</script>
<style lang="less" scoped>
.team-card {
  box-shadow: none !important;
  .one-line {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-select {
    width: 200px;
  }
}
</style>
